<template>
  <div class="map-base-box">
    <div class="base-item" @click="handleOpenLayer">
      <i class="iconfont icon-layer"></i>
    </div>
    <div class="base-item" @click="handleZoomIn">
      <i class="iconfont icon-jia"></i>
    </div>
    <div class="base-item" @click="handleZoomOut">
      <i class="iconfont icon-jian"></i>
    </div>
    <div class="base-item" @click="handleHome">
      <i class="iconfont icon-homefill"></i>
    </div>
  </div>
  <div class="layer-box" v-if="state.showLayer">
    <div class="btn-top" v-if="router.currentRoute.value.name == 'dispatchManage'">
      <div class="btn-top-heard" @click="searchBtn(4)">
        <span class="btn-img-left"></span>
        <span class="btn-text">专题图层</span>
        <span class="btn-img-right" :class="{ active: btnShow === 4 ? true : false }"></span>
      </div>
      <div class="btn-top-body" v-if="btnShow === 4">
        <!-- <el-radio-group v-model="state.modelParams">
          <el-radio :label="0">无</el-radio>
        </el-radio-group> -->
        <div class="title" @click="handleClickModelParams">
          <i class="iconfont icon-youxia" v-if="state.showModelParams"></i>
          <i class="iconfont icon-zuoshang" v-else></i>
          <span>模型参数</span>
        </div>
        <div
          class="model-title"
          @click="handleClickXajModelParams"
          v-if="state.showModelParams && useDispatchManage().lableVal == '新安江'"
        >
          新安江模型参数
        </div>
        <el-radio-group
          v-model="state.xajModelParams"
          v-if="
            state.showXajModelParams &&
            useDispatchManage().lableVal == '新安江' &&
            useDispatchManage().scid
          "
        >
          <el-radio
            v-for="item in xajModelParamsArr"
            :key="item.id"
            :label="item.id"
            @change="handleChangeXajParams($event, item)"
          >
            <el-tooltip :content="item.value" placement="top" :disabled="item.value.length < 8">
              <span>{{ item.value }}</span>
            </el-tooltip>
          </el-radio>
        </el-radio-group>
        <div
          class="model-title"
          @click="handleClickSkbyModelParams"
          v-if="state.showModelParams && useDispatchManage().lableVal == '时空变源'"
        >
          时空变源模型参数
        </div>
        <el-radio-group
          v-model="state.skbyModelParams"
          v-if="state.showSkbyModelParams && useDispatchManage().lableVal == '时空变源'"
        >
          <el-radio
            v-for="item in skbyModelParamsArr"
            :key="item.id"
            :label="item.id"
            @change="handleChangeSkbyParams($event, item)"
          >
            <el-tooltip :content="item.value" placement="top" :disabled="item.value.length < 8">
              <span>{{ item.value }}</span>
            </el-tooltip>
          </el-radio>
        </el-radio-group>
        <div class="title" @click="handleClickSwRes">
          <i class="iconfont icon-youxia" v-if="state.showSwRes"></i>
          <i class="iconfont icon-zuoshang" v-else></i>
          <span>水文计算结果</span>
        </div>
        <el-radio-group
          v-if="state.showSwRes && useDispatchManage().scid"
          v-model="state.modelParams"
        >
          <el-radio
            v-for="item in swModelParamsArr"
            :key="item.id"
            :label="item.id"
            @change="handleChangeRadioSw($event, item)"
          >
            <el-tooltip :content="item.value" placement="top" :disabled="item.value.length < 8">
              <span>{{ item.value }}</span>
            </el-tooltip>
          </el-radio>
        </el-radio-group>
        <div class="title" @click="handleClickSdlRes">
          <i class="iconfont icon-youxia" v-if="state.showSdlRes"></i>
          <i class="iconfont icon-zuoshang" v-else></i>
          <span>水动力计算结果</span>
        </div>
        <el-radio-group
          v-if="state.showSdlRes && useDispatchManage().scCode"
          v-model="state.modelParams"
        >
          <el-radio
            v-for="item in sdlModelParamsArr"
            :key="item.id"
            :label="item.id"
            @change="handleChangeRadioSdl($event, item)"
          >
            <el-tooltip :content="item.value" placement="top" :disabled="item.value.length < 8">
              <span>{{ item.value }}</span>
            </el-tooltip>
          </el-radio>
        </el-radio-group>
      </div>
    </div>
    <!-- 上方按钮 -->
    <div class="btn-top">
      <div class="btn-top-heard" @click="searchBtn(3)">
        <span class="btn-img-left"></span>
        <span class="btn-text">业务矢量</span>
        <span class="btn-img-right" :class="{ active: btnShow === 3 ? true : false }"></span>
      </div>
      <div class="btn-top-body" v-if="btnShow === 3">
        <el-checkbox-group v-model="state.checkList">
          <el-checkbox
            v-for="(item, index) in state.checkedList"
            :key="index"
            :label="item.label"
            v-model="state.checkedVal"
            @change="handleChangeTree($event, item.key)"
          >
            <div class="check-flex">
              <span class="check-flex-font">{{ item.label }}</span>
              <span class="img-box">
                <img :src="getModelTree(item.icon)" />
                <img v-if="item.iconsw" :src="getModelTree(item.iconsw)" />
                <img v-if="item.iconWata" :src="getModelTree(item.iconWata)" />
              </span>
            </div>
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <!-- 上方按钮 -->
    <div class="btn-top">
      <div class="btn-top-heard" @click="searchBtn(1)">
        <span class="btn-img-left"></span>
        <span class="btn-text">基础矢量</span>
        <span class="btn-img-right" :class="{ active: btnShow === 1 ? true : false }"></span>
      </div>
      <div class="btn-top-body" v-if="btnShow === 1">
        <!-- <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          default-expand-all="true"
        />-->
        <el-tree
          :data="vectorLayerData"
          show-checkbox
          node-key="id"
          default-expand-all="true"
          :default-checked-keys="[]"
          :expand-on-click-node="false"
          @check-change="vectorLayerCheckChange"
        >
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span class="title-item">{{ node.label }}</span>
              <span class="img-box" v-if="!data.children">
                <img :src="getModelTree(data.icon)" />
              </span>
            </span>
          </template>
        </el-tree>
      </div>
    </div>
    <!-- 下方按钮 -->
    <div class="btn-bottom">
      <div class="btn-top-heard" @click="searchBtn(2)">
        <span class="btn-img-left btn-img-left1"></span>
        <span class="btn-text">基础底图</span>
        <span class="btn-img-right" :class="{ active: btnShow === 2 ? true : false }"></span>
      </div>
      <div class="btn-top-body" v-if="btnShow === 2">
        <el-tree
          :data="baseLayerData"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="[71, 74]"
          :props="defaultProps"
          default-expand-all="true"
          @check-change="baseMapLayerCheckChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getModelTree } from '@/utils/loadAssets'
import Map from '@/components/app-map/map.vue'
import { useRouter } from 'vue-router'
// import { useDispatchManage } from '@/store/modules/dispatch-manage.js'
const router = useRouter()
//图层JSON
import service_layers from '@/assets/data/map_data/service_layers.json'
import {
  clearLayer,
  addTileLayer,
  removeLayer,
  addSecPoints,
  addSecName,
  addTopology,
  addJsUnit,
  addJsUnitNoScheme,
  addWataLayer,
  addRiverLayer,
  addNodeLayer,
  addDynamicLayer,
  changeJsUnitSchemeGraphic,
  locatePoint,
  addDynamicLayerShowAll,
  addBasinVectorTiles,
  removeBasinVectorTiles,
  addImageToMap
} from '@/utils/mapUtils'
import {
  SEC_LAYER,
  SEC_NAME_LAYER,
  JS_UNIT_LAYER,
  TOPOLOGY_LAYER,
  XAJ_UNIT_LAYER,
  WATA_LAYER,
  RIVER_LAYER,
  NODE_LAYER,
  D1_SECTION_LAYER,
  D1_UNIT_LAYER,
  D2_GRID_LAYER,
  DWH_BASE_LAYER_URL,
  YSH_BASE_LAYER_URL,
  DWH_SKBYUNIT_LAYER_URL,
  DWH_SKBYUNIT_LAYER,
  DWH_XAJUNIT_LAYER_URL,
  DWH_XAJUNIT_LAYER,
  DWH_SDLSEC_LAYER1_URL,
  DWH_SDLSEC1_LAYER,
  DWH_SDLSEC_LAYER2_URL,
  DWH_SDLSEC2_LAYER,
  YSH_SKBYUNIT_LAYER_URL,
  YSH_SKBYUNIT_LAYER,
  YSH_XAJUNIT_LAYER_URL,
  YSH_XAJUNIT_LAYER,
  YSH_SDLSEC_LAYER1_URL,
  YSH_SDLSEC1_LAYER,
  YSH_SDLSEC_LAYER2_URL,
  YSH_SDLSEC2_LAYER,
  DWH_BASE_LAYER,
  YSH_BASE_LAYER,
  DISPATCH_RAIN_LAYER,
  DISPATCH_RIVER_LAYER,
  DISPATCH_FLOW_LAYER
} from '@/constants'
//地图api
import {
  getPPtnGeomList,
  getSecGeomList,
  getNodeGeomList,
  getTopologyGeomList
} from '@/services/modules/map.js'
import { BASE_URL } from '@/services/config'
import { useDispatchManage } from '@/store/modules/dispatch-manage.js'
//地图小流域河道
const baselayerStyle = reactive({
  //小流域
  wata: {
    weight: 0.8,
    fillOpacity: 0.6,
    fillColor: '#FFFF00',
    color: '#FFFF00',
    fill: false
  },
  //河道
  rivl: {
    weight: 1,
    color: '#00BFFF'
  }
  //水动力
  // ？？？
})
//时空变源style
const skbyUnitStyle = reactive({
  skby: {
    weight: 0.3,
    // fillOpacity: 0.6,
    fillColor: 'red',
    color: 'red',
    fill: false
  }
})
//大汶河时空变源方案style
const dwh_skby_schemeStyle = reactive({
  skby: {
    weight: 0.3,
    fillOpacity: 0.6,
    fillColor: '#0033CC',
    color: 'red',
    fill: true
  }
})
//沂沭河时空变源方案style
const ysh_skby_schemeStyle = reactive({
  skby: {
    weight: 0.3,
    fillOpacity: 0.6,
    fillColor: '#0033CC',
    color: 'red',
    fill: true
  }
})
//大汶河新安江方案style
const dwh_xaj_schemeStyle = reactive({
  xaj: {
    weight: 0.3,
    fillOpacity: 0.6,
    fillColor: '#66CC33',
    color: 'red',
    fill: true
  }
})
//沂沭河新安江方案style
const ysh_xaj_schemeStyle = reactive({
  xaj: {
    weight: 0.3,
    fillOpacity: 0.6,
    fillColor: '#66CC33',
    color: 'red',
    fill: true
  }
})
const sdlUnitStyle = reactive({
  sdl: {
    weight: 1,
    // fillOpacity: 0.6,
    fillColor: 'red',
    color: 'red',
    fill: false
  }
})
const sdl2UnitStyle = reactive({
  sdl: {
    weight: 1,
    fillOpacity: 0.6,
    color: 'red',
    fill: false
  }
})
//新安江 style
const xajUnitStyle = reactive({
  xaj: {
    weight: 0.3,
    // fillOpacity: 0.6,
    fillColor: 'green',
    color: 'red',
    fill: false
  }
})
let xajModelParamsArr = [
  { id: 'UM', value: '上层张力水容量UM' },
  { id: 'LM', value: '下层张力水容量LM' },
  { id: 'WM', value: '张力水容量WM' },
  { id: 'K', value: '蒸散发能力折算系数K' },
  { id: 'SM', value: '自由蓄水容量SM' },
  { id: 'KI', value: '壤中流出流系数KI' },
  { id: 'KG', value: '地下水出流系数KG' },
  { id: 'CG', value: '地下水消退系数CG' },
  { id: 'CI', value: '壤中流消退系数CI' },
  { id: 'CS', value: '河网水流消退系数CS' },
  { id: 'X', value: '流量比重系数x' },
  { id: 'L', value: '滞后时间L' }
]
let skbyModelParamsArr = [
  { id: 'ks', value: '饱和水力传导度Ks' },
  { id: 'prep', value: '优先流面积百分比Prep' },
  { id: 'ki1', value: '填中流出流线性系数ki1' },
  { id: 'ki2', value: '壤中流出流非线性系数ki2' },
  { id: 'kp1', value: '优先流出流线性系数kp1' },
  { id: 'kp2', value: '优先流出流非线性系数kp2' },
  { id: 'ks2g', value: '土填向地下水渗漏系数ks2g' },
  { id: 'h', value: '土壤厚度H' },
  { id: 'h1', value: '上层土壤厚度H1' },
  { id: 'kgs', value: '地下水水库渗漏系数Kgs' },
  { id: 'pa', value: '坡面汇流系数α' },
  { id: 'pm', value: '坡面汇流系统m' },
  { id: 'ra', value: '河道汇流系数α' },
  { id: 'rm', value: '河道汇流系数m' }
]
let swModelParamsArr = [
  { id: '4', value: '预报对象面总雨量' },
  { id: '5', value: '预报对象洪峰流量' },
  { id: '6', value: '河道洪峰流量' },
  { id: '7', value: '预报对象时刻雨量' },
  { id: '8', value: '预报对象时刻流量' },
  { id: '9', value: '河道时刻流量' }
]
let sdlModelParamsArr = [
  { id: '11', value: '河道断面水深' },
  { id: '12', value: '洪水淹没' }
]
// 地图初始化参数
const mapOptions = { crs: 'EPSG:4490', basemaps: [] }
//bus
import emitter from '@/utils/bus'
// 添加地图操作方法
// import {
//   removeLayer,
//   addTileLayer,
//   addDynamicLayer,
//   addDynamicLayerShowAll,
//   locatePoint,
//   addSecPoints,
//   addSecName,
//   addTopology,
//   removeBasinVectorTiles,
//   addGeojsontoFly
// } from '@/utils/mapUtils'
const baseLayerData = reactive(service_layers.baseMapLayers)
const vectorLayerData = reactive(service_layers.vectorLayers)
const emit = defineEmits(
  'handleChangeRadioSw',
  'handleChangeSkbyParams',
  'handleChangeXajParams',
  'handleChangeRadioSdl',
  'handleChangeTree'
)
//清空图层
const clearLayers = () => {
  removeBasinVectorTiles(window.mapInstance, DISPATCH_RAIN_LAYER)
  removeBasinVectorTiles(window.mapInstance, DISPATCH_RIVER_LAYER)
  removeBasinVectorTiles(window.mapInstance, DISPATCH_FLOW_LAYER)
  removeBasinVectorTiles(window.mapInstance, 'SWSECRAINLAYER')
  removeBasinVectorTiles(window.mapInstance, 'SWSECFLOWLAYER')
  removeBasinVectorTiles(window.mapInstance, 'SWRIVERFLOWLAYER')
  removeBasinVectorTiles(window.mapInstance, 'section')
  removeBasinVectorTiles(window.mapInstance, 'cell')
}
function handleChangeTree(event, item) {
  clearLayer(window.mapInstance, 'import')
  emit('handleChangeTree', { event: event, item: item })
}
function handleChangeXajParams($event, item) {
  clearLayer(window.mapInstance, 'import')

  xajModelParamsArr.forEach((item) => {
    removeBasinVectorTiles(window.mapInstance, item.id)
  })
  skbyModelParamsArr.forEach((item) => {
    removeBasinVectorTiles(window.mapInstance, item.id)
  })
  switch (item.id) {
    case 'UM':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/xaj/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'UM',
        {
          UM: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'LM':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/xaj/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'LM',
        {
          LM: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'WM':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/xaj/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'WM',
        {
          WM: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'K':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/xaj/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'K',
        {
          K: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'SM':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/xaj/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'SM',
        {
          SM: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'KI':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/xaj/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'KI',
        {
          KI: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'KG':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/xaj/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'KG',
        {
          KG: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'CG':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/xaj/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'CG',
        {
          CG: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'CL':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/xaj/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'CL',
        {
          CL: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'CS':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/xaj/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'CS',
        {
          CS: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'L':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/xaj/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'L',
        {
          L: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'X':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/xaj/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'X',
        {
          X: function (properties) {
            return switchData(properties)
          }
        }
      )
      break

    default:
      break
  }
  emit('handleChangeXajParams', item)
}
function switchData(properties) {
  var color
  if (properties.vlev == 1) {
    color = '#86e7fe'
  } else if (properties.vlev == 2) {
    color = '#00c5ff'
  } else if (properties.vlev == 3) {
    color = '#55ff00'
  } else if (properties.vlev == 4) {
    color = '#ffff73'
  } else if (properties.vlev == 5) {
    color = '#ffc800'
  } else if (properties.vlev == 6) {
    color = '#ff0000'
  } else if (properties.vlev == 7) {
    color = '#a52a2a'
  }
  return {
    weight: 1,
    fillOpacity: 0.6,
    fillColor: color,
    color: 'black',
    fill: true
  }
}
function handleChangeSkbyParams($event, item) {
  clearLayer(window.mapInstance, 'import')

  xajModelParamsArr.forEach((item) => {
    removeBasinVectorTiles(window.mapInstance, item.id)
  })
  skbyModelParamsArr.forEach((item) => {
    removeBasinVectorTiles(window.mapInstance, item.id)
  })

  switch (item.id) {
    case 'ks':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/skby/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'ks',
        {
          ks: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'prep':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/skby/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'prep',
        {
          prep: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'ki1':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/skby/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'ki1',
        {
          ki1: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'ki2':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/skby/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'ki2',
        {
          ki2: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'kp1':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/skby/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'kp1',
        {
          kp1: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'kp2':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/skby/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'kp2',
        {
          kp2: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'ks2g':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/skby/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'ks2g',
        {
          ks2g: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'h':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/skby/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'h',
        {
          h: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'h1':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/skby/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'h1',
        {
          h1: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'kgs':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/skby/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'kgs',
        {
          kgs: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'pa':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/skby/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'pa',
        {
          pa: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'pm':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/skby/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'pm',
        {
          pm: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'ra':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/skby/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'ra',
        {
          ra: function (properties) {
            return switchData(properties)
          }
        }
      )
      break
    case 'rm':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatch/skby/${useDispatchManage().scid}/${item.id}/{z}/{x}/{y}`,
        'rm',
        {
          rm: function (properties) {
            return switchData(properties)
          }
        }
      )
      break

    default:
      break
  }
  emit('handleChangeSkbyParams', item)
}
function handleChangeRadioSw($event, item) {
  clearLayer(window.mapInstance, 'import')
  xajModelParamsArr.forEach((item) => {
    removeBasinVectorTiles(window.mapInstance, item.id)
  })
  skbyModelParamsArr.forEach((item) => {
    removeBasinVectorTiles(window.mapInstance, item.id)
  })
  emit('handleChangeRadioSw', item)
}
function handleChangeRadioSdl(event, item) {
  clearLayer(window.mapInstance, 'import')

  emit('handleChangeRadioSdl', item)
}
const btnShow = ref(0)
const state = reactive({
  skbyModelParams: '',
  xajModelParams: '',
  showSdlRes: true,
  showModelParams: true,
  showXajModelParams: true,
  showSkbyModelParams: true,
  showSwRes: true,
  modelParams: '',
  showLayer: false,
  checkList: [
    '预报对象(水库水文)',
    '拓扑结构',
    '河道-小流域',
    '计算单元(时空)',
    '计算单元(新安江)',
    '小流域',
    '节点',
    '雨量站'
  ],
  checkedList: [
    {
      id: 1,
      label: '预报对象(水库水文)',
      key: 'sec',
      icon: 'sknew.png',
      iconsw: 'swnew.png'
    },
    {
      id: 2,
      label: '拓扑结构',
      key: 'topology',
      icon: 'pwjg.png'
    },
    {
      id: 3,
      label: '河道-小流域',
      key: 'river',
      icon: 'river.png',
      iconWata: 'xly.png'
    },
    {
      id: 4,
      label: '计算单元(时空)',
      key: 'jsUnitSk',
      icon: 'unit_skby.png'
    },
    {
      id: 5,
      label: '计算单元(新安江)',
      key: 'jsUnitXaj',
      icon: 'unit_xaj.png'
    },

    {
      id: 7,
      label: '节点',
      key: 'node',
      icon: 'nodenew.png'
    },
    {
      id: 8,
      label: '雨量站',
      key: 'rainSite',
      icon: 'ylz.png'
    }
  ]
})
const props = defineProps({
  showLayer: {
    type: Boolean,
    default: false
  }
})
//点击模型
function handleClickModelParams() {
  state.showModelParams = !state.showModelParams
  if (!state.showModelParams) {
    state.showSkbyModelParams = false
    state.showXajModelParams = false
  }
}
function handleClickSkbyModelParams() {
  state.showSkbyModelParams = !state.showSkbyModelParams
}
function handleClickXajModelParams() {
  state.showXajModelParams = !state.showXajModelParams
}
//点击水文结果
function handleClickSwRes() {
  state.showSwRes = !state.showSwRes
}
//点击水动力结果
function handleClickSdlRes() {
  state.showSdlRes = !state.showSdlRes
}
const baseMapLayerCheckChange = (data, checked, indeterminate) => {
  if (data.lyType != undefined) {
    const item = {
      id: data.id,
      name: data.label,
      lyType: data.lyType,
      lyIndex: data.lyIndex,
      url: data.url,
      isShow: checked
    }
    const layerInfo = item
    switch (layerInfo.lyType) {
      case 'dynamic':
        if (layerInfo.isShow) {
          addDynamicLayerShowAll(
            window.mapInstance,
            layerInfo.url,
            layerInfo.lyIndex,
            layerInfo.id,
            layerInfo.name
          )
        } else {
          removeLayer(window.mapInstance, layerInfo.id)
        }

        break
      case 'tile':
        if (layerInfo.isShow) {
          addTileLayer(
            window.mapInstance,
            layerInfo.url,
            layerInfo.lyIndex,
            layerInfo.id,
            layerInfo.name
          )
        } else {
          removeLayer(window.mapInstance, layerInfo.id)
        }
        break
      default:
        break
    }
  }
}
const vectorLayerCheckChange = (data, checked, indeterminate) => {
  if (data.lyType != undefined) {
    const item = {
      id: data.id,
      name: data.label,
      lyType: data.lyType,
      lyIndex: data.lyIndex,
      url: data.url,
      isShow: checked
    }
    const layerInfo = item
    switch (layerInfo.lyType) {
      case 'dynamic':
        if (layerInfo.isShow) {
          addDynamicLayerShowAll(
            window.mapInstance,
            layerInfo.url,
            layerInfo.lyIndex,
            layerInfo.id,
            layerInfo.name
          )
        } else {
          removeLayer(window.mapInstance, layerInfo.id)
        }

        break
      case 'tile':
        if (layerInfo.isShow) {
          addTileLayer(
            window.mapInstance,
            layerInfo.url,
            layerInfo.lyIndex,
            layerInfo.id,
            layerInfo.name
          )
        } else {
          removeLayer(window.mapInstance, layerInfo.id)
        }
        break
      default:
        break
    }
  }
}

const searchBtn = (index) => {
  if (btnShow.value === index) {
    btnShow.value = 0
    return
  }
  btnShow.value = index
}
let mapInstance = null
//地图获取雨量站
function PPtnGeomList() {
  return new Promise((resolve, reject) => {
    getPPtnGeomList({ zoneId: state.riverValue }).then((res) => {
      if (res.code === 200) {
        state.pptn = res.data
        resolve(state.pptn)
      }
    })
  })
}
//地图获取预报对象
function SecGeomList() {
  return new Promise((resolve, reject) => {
    getSecGeomList({ zoneId: state.riverValue }).then((res) => {
      if (res.code === 200) {
        state.secGeoData = res.data
        resolve(state.secGeoData)
      }
    })
  })
}
//地图获取节点
function NodeGeomList() {
  return new Promise((resolve, reject) => {
    getNodeGeomList({ zoneId: state.riverValue }).then((res) => {
      if (res.code === 200) {
        state.nodeGeoData = res.data
        resolve(state.nodeGeoData)
      }
    })
  })
}
//地图获取拓扑线
function TopologyGeomList() {
  return new Promise((resolve, reject) => {
    getTopologyGeomList({ zoneId: state.riverValue }).then((res) => {
      if (res.code === 200) {
        state.topologyGeoData = res.data
        resolve(state.topologyGeoData)
      }
    })
  })
}
onMounted(() => {
  const layerUrl =
    'https://giskg-sdsl.gistack.cn/OneMapServer/rest/services/Shandong_dwh05mdom/MapServer'
  addTileLayer(window.mapInstance, layerUrl, 4, 71, '0.5米卫星影像')
  // addDynamicLayerShowAll(
  //   window.mapInstance,
  //   'https://giskg-sdsl.gistack.cn/OneMapServer/rest/services/L1_xiaoliuyu/MapServer',
  //   13,
  //   12,
  //   '小流域'
  // )
  // addDynamicLayerShowAll(
  //   window.mapInstance,
  //   'https://giskg-sdsl.gistack.cn/OneMapServer/rest/services/L1_heliu/MapServer',
  //   14,
  //   13,
  //   '河流'
  // )
  // addDynamicLayerShowAll(
  //   window.mapInstance,
  //   'https://giskg-sdsl.gistack.cn/OneMapServer/rest/services/Shandong_hupo/MapServer',
  //   15,
  //   14,
  //   '湖泊'
  // )
  // addDynamicLayerShowAll(
  //   window.mapInstance,
  //   'https://giskg-sdsl.gistack.cn/OneMapServer/rest/services/Shandong_shuikumian/MapServer',
  //   16,
  //   15,
  //   '水库面'
  // )
})
function handleZoomIn() {
  window.mapInstance.zoomIn()
  // emit('handleZoomIn')
}
function handleZoomOut() {
  window.mapInstance.zoomOut()
  // emit('handleZoomOut')
}
function handleHome() {
  window.mapInstance.flyHome()
  // emit('handleHome')
}
function handleOpenLayer() {
  state.showLayer = !state.showLayer
}
</script>

<style lang="less" scoped>
.map-base-box {
  position: absolute;
  left: 20px;
  bottom: 50px;
  width: 40px;
  height: 200px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgb(0, 176, 240);
  z-index: 1;
  .base-item {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    i {
      font-size: 20px;
      color: gray;
      &:hover {
        font-size: 30px;
      }
    }
  }
}
.layer-box {
  width: 210px;
  position: absolute;
  left: 80px;
  bottom: 50px;
  z-index: 11;
  // 上方按钮
  .btn-top-heard {
    width: 100%;
    height: 40px;
    background-color: #ffff;
    border: 1px solid rgba(22, 155, 213, 1);
    border-radius: 5px 5px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;

    .btn-img-left {
      height: 27px;
      width: 27px;
      margin-left: 8px;
      background: url('@/assets/images/basicsConfig/u17.png') no-repeat;
      background-size: 100% 100%;
    }
    .btn-img-left1 {
      background: url('@/assets/images/basicsConfig/u8.png') no-repeat;
      background-size: 100% 100%;
    }

    .btn-text {
      color: rgb(0, 176, 240);
    }
    .btn-img-right {
      height: 27px;
      width: 27px;
      margin-right: 8px;
      background: url('@/assets/images/basicsConfig/u7.png') no-repeat;
      background-size: 100% 100%;
    }
    .active {
      background: url('@/assets/images/basicsConfig/u6.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .btn-top {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    .btn-top-body {
      width: 100%;
      height: 270px;
      // background-color: #ffffff;
      background: rgba(255, 255, 255, 0.7);
      overflow-y: auto;
      border: 1px solid rgba(22, 155, 213, 1);
      border-top: 0px;
      .check-flex {
        display: flex;
        align-items: center;
        .check-flex-font {
          width: 110px;
        }
        .img-box {
          margin-left: 15px;
          img {
            width: 20px;
            height: 20px;
            // margin-right: 5px;
          }
        }
      }
      :deep(.el-radio-group) {
        max-height: 200px;
        overflow-y: auto;
        margin-left: 20px;
        .el-radio__label {
          color: #606266;
          width: 120px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          display: inline-block;
        }
      }
      .title {
        margin-left: 5px;
        i {
          font-size: 20px;
        }
        span {
          color: gray;
        }
      }
      .model-title {
        margin-left: 30px;
        line-height: 30px;
        cursor: pointer;
      }
      :deep(.el-checkbox) {
        display: flex;
        margin-left: 20px;
        justify-content: space-between;
        width: 120px;
        .el-checkbox__label {
          color: #606266;
        }
      }
      :deep(.el-tree) {
        background: transparent;
      }
      .custom-tree-node {
        display: flex;
        .title-item {
          width: 80px;
        }
        .img-box {
          margin-left: 10px;
          width: 20px;
          height: 20px;
          img {
            width: 20px;
            height: 20px;
          }
        }
      }
    }
  }
  .btn-bottom {
    width: 100%;
    margin-bottom: 0px;
    .btn-top-body {
      width: 100%;
      height: 270px;
      border: 1px solid rgba(22, 155, 213, 1);
      // background-color: #ffffff;
      background: rgba(255, 255, 255, 0.7);
      border-top: 0px;
      overflow-y: auto;
      :deep(.el-tree) {
        background: transparent;
      }
    }
  }
}
</style>
>
